<template>
  <svg :class="['svg-icon', className]" :style="{ width: size, height: size, color: color }" aria-hidden="true">
    <use x-link:href="symbolId" :href="symbolId" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

/**
 * SVG 图标组件的属性接口
 */
interface Props {
  /** 图标名称，对应 src/assets/icons 目录下的 SVG 文件名 */
  name: string
  /** 图标大小，支持任何有效的 CSS 尺寸值 */
  size?: string
  /** 图标颜色，支持任何有效的 CSS 颜色值 */
  color?: string
  /** 自定义 CSS 类名 */
  className?: string
}

/**
 * 定义组件属性，设置默认值
 */
const props = withDefaults(defineProps<Props>(), {
  size: '16px',
  color: 'currentColor',
  className: ''
})

/**
 * 计算 symbol ID，用于引用 SVG 图标
 * 格式：icon-[目录名]-[文件名]
 */
const symbolId = computed(() => `#icon-${props.name}`)
</script>

<style scoped>
/**
 * SVG 图标基础样式
 */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}

/* 深色模式：默认继承文本色，但提供兜底色 */
@media (prefers-color-scheme: dark) {
  .svg-icon {
    color: #e5e7eb;
  }
}
</style>
